<template>
  <el-skeleton  animated :loading="loading">
    <template #template>
      <el-skeleton :rows="1" />
    </template>
    <template #default>
      <el-space direction="vertical">
        <div class="top">
          <h2>推荐节目</h2>
          <p>(每日更新)</p>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" stripe class="box">
          <el-table-column prop="img" width="60px">
            <template #default="{ row }">
              <div class="hoverstyle">
                <!-- <el-icon style="font-size:30px;" class="iconstyle">
                  <VideoPlay />
                </el-icon> -->
              </div>
              <el-image :src="row.blurCoverUrl" style="width: 50px; height: 50px"></el-image>
            </template>
          </el-table-column>
      
          <el-table-column prop="name" width="380px">
            <template #default="{ row }">
              <div class="profile" @click="getId(row.id); jumpDj()">
                <a>{{ row.name }}</a>
              </div>
            </template>
          </el-table-column>>
          <el-table-column prop="dj.brand" width="160px">
            <template #default="{ row }">
              <div class="profile">
                <p>{{ row.dj.brand }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="listenerCount" width="100px">
            <template #default="{ row }">
              <div style="display: flex; flex:1;width: 150px;">
                <p>播放</p>
                <p>{{ row.listenerCount }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="likedCount" width="120px">
            <template #default="{ row }">
              <div style="display: flex; flex:1">
                <p>点赞</p>
                <p>{{ row.likedCount }}</p>
      
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="likedCount" width="120px">
            <template #default="{ row }">
              <div class="button">{{ row.radio.category }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-space>
    </template>
  </el-skeleton>
</template>

<script>

// import { VideoPlay } from '@element-plus/icons-vue'
import { getProgramList } from '@/api/dj'
import { mapMutations, mapActions } from 'vuex'
export default {
  components: {
    // VideoPlay // 图标
  },
  data() {
    return {
      tableData: [],
      loading:true

    }
  },

  methods: {
    ...mapMutations('djProgramModule', ['SET_ID']),
    ...mapActions('djProgramModule', ['CHANGE_ID']),
    // 获取表格信息
    getTableList() {
      getProgramList().then((res) => {
        // console.log(res.programs, '数据主体，常看');
        this.tableData = res.programs || [];
        this.loading = false
      })
    },
    // 跳转 电台 节目详情
    jumpDj() {
      this.$router.push({ 'name': 'djprogramDetail' })
    },
    getId(id) {
      // console.log(id);
      this.CHANGE_ID(id)
    }
  },
  created() {
    this.getTableList()
  },
}
</script>

<style lang="scss" scoped>
.box {
  padding-left: 20px;
  border-top: 3px solid rgb(188, 65, 65);
 
}

.profile {
  display: flex;

  a {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 360px;
  }

  a:hover {
    text-decoration: underline;
  }

}


.top {
  display: flex;
  margin: 5px 0;
  p {
    margin-left: 20px;
    align-self: flex-end;
  }
}

.button {
  border: 1px #ccc solid;
  text-align: center;
  color: #999
}

;

.button:hover {
  border: 1px #333 solid;
  color: #333
}


.hoverstyle {
  width: 50px;
  height: 50px;
  background-color: rgba(14, 14, 14, 0);
  position: absolute;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;

}

.hoverstyle:hover {
  // background-color: rgba(14, 14, 14, 0.7);

}

.iconstyle {
  color: rgba(87, 82, 82, 0);
}

.iconstyle:hover {
  color: rgba(254, 254, 254, 0.7);
}
</style>